// import logo from './logo.svg';
import './App.css';
import React from 'react';

// function App() {
// 	return (
// 		<div className="App">
// 			<header className="App-header">
// 				<img src={logo} className="App-logo" alt="logo"/>
// 			</header>
// 			<h1>Hello Word</h1>
// 			<p>1</p>
// 		</div>
// 	);
// }
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			name: '小鸟游六花',
			age: 19,
			color: '#91bef0',
			val: '',
			list: []
		}
	}

	handler = (e) => {
		console.log(e.target.value);
		this.setState({
			age: 16,
			color: '#60609c'
		});
	}
	add = (e) => {
		if (e.keyCode === 13 && e.target.value) {
			let arr = this.state.list;
			arr.push(e.target.value);
			this.setState({
				list: arr
			});
			e.target.value = ''
		}
	}
	change = (e) => {
		if (e.target.value) {
			this.setState({
				val: e.target.value
			});
		}
	}

	del(i) {
		let _list = this.state.list;
		_list.splice(i, 1);
		this.setState({
			list: _list
		});
	}

	render() {
		let list1 = this.state.list;
		let _html = [];
		list1.forEach((item, index) => {
			_html.push(<p key={index}>{item}<span onClick={this.del.bind(this, index)}>删除</span>
			</p>);
		});
		return <div className="a">
			<h1>Hello {this.state.name}</h1>
			<h1 color={this.state.color}>年龄：{this.state.age}岁</h1>
			<p>
				<input onClick={this.handler} type="button" value="还老返童"/>
			</p>
			<p><input type="text" onChange={this.change} onKeyDown={this.add}/></p>
			{_html}
		</div>
	}
}

export default App;
